<!-- Dom模板 -->
<template>
  <div class="bigs">
    <!-- 顶部 -->
    <div class="top">
      <div class="top_left">
        <input type="text" name="" placeholder="2020夏令营" id="" />
        <span class="iconfont icon-sousuo"></span>
      </div>
      <div class="top_right">
        <!-- <span class="iconfont icon-weixinxiaochengxu"></span> -->
      </div>
    </div>
    <!-- 美可玩 -->
    <div class="wan">
      <p>
        <img
          @click="goRwxq"
          class="animate__animated animate__bounceInLeft"
          src="../../../../static/img/图片 3@1x.png"
          alt=""
        />
      </p>
      <p>
        <img class="iii" src="../../../../static/img/图片 2@1x.png" alt="" />
      </p>
    </div>

    <!-- 图片区 -->
    <div class="imgs">
      <img
        class="animate__animated animate__bounceInRight"
        src="../../../../static/img/图片 2@1x (2).png"
        alt=""
      />
    </div>

    <!-- 图片拖拽区 -->
    <div class="touchqu">
      <div
        class="bigtouchqu animate__animated animate__bounceInRight"
        ref="bigtouchqu"
      >
        <div class="chang" ref="chang">
          <div :style="div1">
            <p>奶爸来袭</p>
            <p>档位线来临时最大的危险就是奶爸！</p>
            <p><span class="iconfont icon-erji1"></span><span>53432次</span></p>
            <div><span>21集</span></div>
          </div>
          <div :style="div2">
            <p>宝贝最爱</p>
            <p>增强自信心，决战前夕的动员大会</p>
            <p><span class="iconfont icon-erji1"></span><span>13991次</span></p>
            <div><span>38集</span></div>
          </div>
          <div :style="div3">
            <p>宝妈必听</p>
            <p>十分钟让您懂宝贝心理</p>
            <p>
              <span class="iconfont icon-erji1"></span><span>982201次</span>
            </p>
            <div><span>21集</span></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选数据 -->
    <div class="last">
      <ul class="animate__animated animate__bounceInRight">
        <li
          v-for="(item, index) in datalist"
          :key="index"
          @click="light(index)"
          :class="nowIndex === index ? 'bg' : ''"
        >
          {{ item.name }}
        </li>
      </ul>

      <div>
        <div
          class="cont animate__animated animate__bounceInRight"
          v-for="(item, index) in datalist"
          :key="index"
          v-show="nowIndex === index"
        >
          <div class="pages" v-for="(items, indexs) in item.list" :key="indexs">
            <img :src="items.img" alt="" />
            <div class="pp">
              <p>{{ items.cont }}</p>
              <p>
                <span>{{ items.li }}</span
                ><span>{{ items.ru }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <Tan /> -->
    <div class="meng">
      <div class="alert">
        <div>
          <img src="../../../../static/img/图片 2@1x.png" alt="" />
          <strong>美可玩故事</strong>
          <span>申请使用</span>
        </div>
        <div>
          <span>你的手机号码</span>
          <p></p>
        </div>
        <div>
          <span>
            <input
              v-model="phoneText"
              class="phone"
              ref="phone"
              type="text"
              placeholder="输入手机号"
              @input='word'
            />
          </span>
          <span>微信绑定手机号</span>
          <span v-if="show" class="iconfont icon-duigouxuanxiang-01"></span>
          <p></p>
        </div>
        <div>
          <span>使用其他手机号码</span>
        </div>

        <div>
          <button @click="no">拒绝</button>
          <button @click="ok">允许</button>
        </div>
      </div>
    </div>
    <transition name="diss" v-if="now">
      <div class="alerts">请输入正确的手机号</div>
    </transition>
    <!-- <Login v-if="flag" @fan="fan"></Login>
    <alery v-if="flagd" @no="no"></alery> -->
    <!-- 底部 -->
  </div>
</template>
<script>
// import Tan from "./tan/tan.vue";
import BScroll from "better-scroll";
import datalist from "../../../../static/data/wei-login.json";
import picture1 from "@/assets/图片 5 Copy 2@1x (2).png";
import picture2 from "@/assets/图片 5@1x (2).png";
import picture3 from "@/assets/图片 5 Copy@1x (1).png";
import * as apis from "../../api/home";
// import Login from './tan/tan'
// import alery from "../../tree/home/alery"
// import tan from ""
import sensitiveWord from '../../js/sensitiveWord'
export default {
  name: "",

  components: {
    // Login,
    // alery
    // Tan,
  },
  data() {
    return {
      msg: "测试",
      phoneText: "",
      div1: {
        backgroundImage: `url(${picture1})`,
        backgroundRepeat: `no-repeat`,
        backgroundPosition: `152px 59px`,
        backgroundSize: `177px 123px`,
      },
      div2: {
        backgroundImage: `url(${picture2})`,
        backgroundRepeat: `no-repeat`,
        backgroundPosition: `198px 46px`,
        backgroundSize: `123px 138px`,
      },
      div3: {
        backgroundImage: `url(${picture3})`,
        backgroundRepeat: `no-repeat`,
        backgroundPosition: `152px 59px`,
        backgroundSize: `177px 123px`,
      },
      flag: false,
      flagd: false,
      datalist: [],
      nowIndex: 0,
      show: false,
      now: false,
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.datalist = datalist;
    this.phone();

    // console.log(this.$route.params.flag)
    // this.flagd=this.$route.params.flag
    // console.log(datalist);
    // this.$refs('chang')
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.bigtouchqu, {
        scrollX: true,
        bounce: {
          // top: true,
          // bottom: true,
          left: false,
          right: false,
          touxiang:true
        },
      });
    });
  },
  // Vue方法定义
  methods: {
    light(index) {
      this.nowIndex = index;
      // console.log(111111);
    },
    goRwxq() {
      // this.$router.push("/rwxq")
      // console.log(111111111);
    },
    phone() {
      // this.$refs.phone.focus();
      this.$refs.phone.addEventListener("blur", () => {
        let val = this.phoneText;
        let reg = /^1[356789]\d{9}$/;
        let rusult = reg.test(val);
        // console.log(rusult);
        if (!rusult) {
          // alert('请输入正确的手机号')
          console.log("输入有误");
          this.show = false;
          setTimeout(() => {
            this.now = true;
          }, 1000);
        } else if (rusult) {
          this.show = true;
          this.now = false;
          localStorage.setItem("phone", "chaunru");
        }
      });
    },
    ok() {
      let val = this.phoneText;
      apis.userData().then((res) => {
        console.log(res.data.code);
        let poney = res.data.code.findIndex((item, index) => {
          return val === item.phone;
        });
        console.log(res.data.code)
        if(poney>-1){
          let vuil = res.data.code[poney].phone
          console.log(vuil)
            localStorage.setItem("username",vuil);
              if (localStorage.getItem("phone")) {
                console.log(123)
                this.$router.push({
                  name: "login",
                  query: {
                    code:true,
                    phone:  res.data.code[poney],
                     tou:false
                  },
                });
              }
        }else{
            localStorage.setItem("username",val);
              if (localStorage.getItem("phone")) {
                console.log(123)
                this.$router.push({
                   name: "login",
                  query: {
                    code:false,
                    phone:val,
                    tou:true
                  },
                });
              }
        }
      });
    },
    no() {
      this.$router.push("/home");
    },
    word() {
      sensitiveWord.forEach((item, index) => {
        if (this.phoneText.indexOf(item) !== -1) {
            this.phoneText=this.phoneText.replace(`${item}`,"*")
        }
      });
    },
  },
};
</script>

<style scoped>
/* 顶部 */
@import url("../../../assets/font/iconfont.css");

.bigs {
  width: 100vw;
  height: calc(736px - 60px);
  overflow-y: auto;
}

.top {
  left: 0px;
  top: 0px;
  width: 414px;
  height: 88px;
  display: flex;
  align-items: flex-end;
  background-color: rgba(255, 255, 255, 100);
}
.top_left {
  margin-left: 19px;
  left: 19px;
  top: 50px;
  float: left;
  margin-right: 34px;
  margin-bottom: 6px;
  width: 258px;
  height: 32px;
  border-radius: 100px;
  background-color: rgba(242, 242, 242, 100);
  color: rgba(191, 191, 191, 100);
  font-size: 14px;
  text-align: left;
  overflow: hidden;
  margin-bottom: 6px;
  font-family: Arial;
}
.top_left input {
  height: 32px;
  padding-left: 19px;
  background: none;
  border: none;
  outline: none;
}
.top_right {
  left: 311px;
  float: left;
  top: 50px;
  width: 87px;
  height: 32px;
  line-height: 20px;
  margin-bottom: 6px;

  border-radius: 30px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  border: 1px solid rgba(232, 232, 232, 100);
}
.top_right span {
  font-size: 32px;
  display: inline-block;
  margin-top: 6px;
}
.animate__animated.animate__bounceInRight {
  --animate-duration: 1s;
}

.animate__animated.animate__bounceInLeft {
  --animate-duration: 1s;
}

:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}
/* 号码不正确时的弹窗 */
.alerts {
  width: 90%;
  margin: 0 5%;
  height: 60px;
  position: absolute;
  top: 10%;
  text-align: center;
  line-height: 60px;
  background: white;
  font-size: 16px;
}
.alerts {
  transition: all 1s ease;
}
.diss-enter {
  opacity: 0;
}
.diss-leave-to {
  opacity: 0;
}
/* 美可玩 */
.wan {
  width: 414px;
  height: 60px;
  display: flex;
  line-height: 60px;
  background: white;
  background-color: rgba(255, 255, 255, 100);
  height: 60px;
  line-height: 60px;
}
.wan p {
  line-height: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 100);
}
.wan p:nth-child(1) {
  padding-left: 10px;
  margin-right: 229px;
}
.wan p img {
  vertical-align: middle;
  background: rgba(255, 255, 255, 100);
}
.wan p:nth-child(1) img:nth-child(1) {
  width: 114px;
  height: 38px;
}

.wan p:nth-child(2) img:nth-child(2) {
  width: 40px;
  height: 40px;
  line-height: 38px;
  border-radius: 50%;
}

.wan p:nth-child(2) .iii {
  animation: rot 1s linear infinite;
}
@keyframes rot {
  100% {
    transform: rotate(360deg);
  }
}
/* 大图 */
.imgs {
  left: 0px;
  top: 148px;
  width: 414px;
  height: 182px;
  line-height: 20px;
  border-radius: 0px 0px 26px 26px;
  text-align: center;
  background: white;
  box-shadow: 0px 2px 6px 0px rgba(230, 230, 230, 40);
}
.imgs img {
  margin-top: 12px;
  left: 14px;
  top: 160px;
  width: 386px;
  height: 158px;
  border-radius: 26px;
}

/* 图片拖拽区 */
.touchqu {
  margin-top: 10px;
  width: 414px;
  height: 204px;
  line-height: 20px;
  border-radius: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: white;
  box-shadow: 0px 2px 6px 0px rgba(230, 230, 230, 40);
}

.touchqu .bigtouchqu {
  width: 386px;
  height: 182px;
  text-align: center;
  line-height: 182px;
  background: white;
  overflow: hidden;
}
.touchqu .bigtouchqu .chang {
  border-radius: 26px;
  display: flex;
  width: 1074px;
  background: white;
  height: 182px;
}
.touchqu .bigtouchqu .chang > div {
  width: 348px;
  height: 182px;
  line-height: 20px;
  border-radius: 26px;
  background-color: rgba(253, 211, 60, 100);
  text-align: center;
}
.touchqu .bigtouchqu .chang div:nth-child(1) {
  margin-right: 15px;
  background: #fdd33c;
}
.touchqu .bigtouchqu .chang div:nth-child(2) {
  background: #09d0b2 1%;

  margin-right: 15px;
}
.touchqu .bigtouchqu .chang div:nth-child(3) {
  background: #fd8ebe;
}
.touchqu .bigtouchqu .chang > div p:nth-child(1) {
  width: 117px;
  padding-top: 19px;
  padding-left: 24px;
  font-weight: 700;
  height: 28px;
  color: rgba(255, 255, 255, 100);
  background-color: transparent;
  font-size: 23px;

  text-align: left;
  font-family: 方正准圆-标准;
}
.touchqu .bigtouchqu .chang > div p:nth-child(2) {
  width: 292px;
  height: 28px;
  padding-left: 24px;
  margin-top: 38px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 100);
  background-color: transparent;

  font-size: 16px;
  text-align: left;
  font-family: 方正准圆-标准;
}
.touchqu .bigtouchqu .chang > div p:nth-child(3) {
  background-color: transparent;
  width: 292px;
  height: 28px;
  padding-left: 24px;
  margin-top: 44px;

  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 100);

  font-size: 16px;
  text-align: left;
  font-family: 方正准圆-标准;
}
.touchqu .bigtouchqu .chang > div p:nth-child(3) span:nth-child(1) {
  width: 24px;
  height: 24px;
  font-size: 24px;
  display: inline-block;
  margin-right: 5px;
  /* background: olivedrab; */
}
.touchqu .bigtouchqu .chang > div p:nth-child(3) span:nth-child(2) {
  left: 53px;
  top: 144px;
  width: 70px;
  height: 28px;
  color: rgba(255, 255, 255, 100);
  font-size: 14px;
  background-color: transparent;

  text-align: left;
  font-family: 方正准圆-标准;
}
.touchqu .bigtouchqu .chang > div div {
  background-color: transparent;

  left: 272px;
  top: -14px;
  width: 76px;
  height: 30px;
  position: relative;
  line-height: 20px;
  border-radius: 26px 0px 26px 0px;

  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  /* background-position: right bottom; */
}

.touchqu .bigtouchqu .chang div:nth-child(1) div {
  background-color: rgba(9, 208, 178, 100);
}
.touchqu .bigtouchqu .chang div:nth-child(2) div {
  background-color: rgb(255, 0, 86);
}
.touchqu .bigtouchqu .chang div:nth-child(3) div {
  background-color: #ffc805;
}

.touchqu .bigtouchqu .chang > div div span {
  background-color: transparent;
  color: rgba(255, 255, 255, 100);
  width: 50px;
  height: 30px;
  /* color: rgba(255, 255, 255, 100); */
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  font-family: 方正准圆-标准;
  display: inline-block;
}
/* 底部 */
.last {
  left: 0px;
  top: 554px;
  width: 414px;
  height: 940px;
  margin-top: 10px;
  line-height: 20px;
  border-radius: 26px;
  /* text-align: center; */
  background: white;
  overflow: hidden;

  box-shadow: 0px 2px 6px 0px rgba(230, 230, 230, 40);
}
.last ul {
  height: 48px;
  width: 414px;
  /* background: wheat; */
  line-height: 48px;
  display: flex;
  /* text-align: center; */
}
.last ul li {
  list-style: none;
  left: 84px;
  top: 566px;
  line-height: 24px;
  margin-top: 12px;
  width: 80px;
  height: 24px;
  color: rgba(168, 168, 168, 100);
  font-size: 14px;
  text-align: center;
  font-family: PingFangSC-regular;
  margin-right: 3px;
}
.last ul .bg {
  left: 167px;
  top: 566px;
  width: 80px;
  font-weight: 700;

  height: 24px;
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  text-align: center;
  font-family: PingFangSC-regular;
}
.last .cont {
  /* height: 48px; */
  width: 414px;
  /* background: wheat; */
  /* line-height: 48px; */
  display: flex;
  flex-wrap: wrap;
  /* text-align: center; */
}
.last .cont .pages {
  width: 180px;
  margin-top: 23px;
  margin-right: 12px;
  /* background: chartreuse; */
  height: 273px;
  margin-left: 14px;
}
.last .cont .pages img {
  margin-bottom: 12px;
}
.last .cont .pages .pp p:nth-child(1) {
  left: 14px;
  top: 817px;
  width: 180px;
  height: 51px;
  color: rgba(0, 0, 0, 1);
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  font-family: 方正准圆-标准;
}
.last .cont .pages .pp p:nth-child(2) span:nth-child(1) {
  width: 66px;
  height: 24px;
  line-height: 17px;
  border-radius: 20px;
  background-color: rgba(255, 199, 0, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 12px;
  display: inline-block;
  line-height: 24px;

  margin-right: 6px;
  text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(255, 230, 139, 100);
  font-family: Arial;
}
.last .cont .pages .pp p:nth-child(2) span:nth-child(2) {
  width: 48px;
  height: 24px;
  line-height: 17px;
  border-radius: 20px;
  background-color: rgba(9, 207, 177, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 12px;
  display: inline-block;
  line-height: 24px;
  text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(201, 255, 249, 100);
  font-family: Arial;
}

/* 底部 */
.bottom {
  margin-top: 30px;
  width: 414px;
  height: 60px;
  line-height: 20px;
  border-radius: 26px 26px 0px 0px;
  text-align: center;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0px -2px 6px 0px rgba(225, 225, 225, 40);
}
.bottom .on {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bottom .on div {
  width: 66px;
  height: 66px;
  line-height: 20px;
  background-color: rgba(10, 206, 176, 100);
  text-align: center;
  border: 4px solid rgba(255, 255, 255, 100);
  border-radius: 50%;
}
.bottom .on div img {
  margin-top: 15px;
  /* margin-left: 17px; */
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
}
.bottom .on:nth-child(3) span {
  width: 24px;
  height: 17px;
  color: rgba(190, 191, 190, 100);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.meng {
  width: 100vw;
  height: 100vh;
  left: 0px;
  position: absolute;
  top: 0px;
  line-height: 20px;
  /* opacity: 0.5; */
  background: rgba(128, 128, 128, 0.7);
  background: rgba(128, 128, 128, 0.7);
  /* text-align: center; */
}
.meng .alert {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 30;
  width: 414px;
  height: 316px;
  line-height: 20px;
  background: white;
  /* text-align: center; */
}
.meng .alert div:nth-child(1) {
  display: flex;
  margin-top: 27px;
  /* justify-content: center; */
  align-items: center;
}
.meng .alert div:nth-child(1) img {
  margin-right: 14px;
  width: 26px;
  margin-left: 28px;
  height: 26px;
}
.meng .alert div:nth-child(1) strong {
  margin-right: 6px;
}

.meng .alert div:nth-child(2) {
  margin-top: 21px;
}
.meng .alert div:nth-child(2) span {
  margin-left: 27px;
  width: 156px;
  height: 25px;
  display: inline-block;
  color: rgba(16, 16, 16, 100);
  /* font-size: ; */
  font-weight: 700;
  font-size: 18px;
  text-align: left;
  margin-bottom: 16px;
  font-family: PingFangSC-regular;
}
.meng .alert div:nth-child(2) p {
  padding: 0;
  margin: 0;
  margin-left: 27px;
  width: 387px;
  height: 1px;
  border: 1px solid rgba(232, 232, 232, 100);
}
.meng .alert div:nth-child(3) {
  margin-top: 18px;
  margin-left: 27px;
}
.meng .alert div:nth-child(3) span:nth-child(1) {
  display: inline-block;
  width: 139px;
  height: 25px;
  color: rgba(16, 16, 16, 100);
  font-size: 18px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin-bottom: 16px;
}

.meng .alert div:nth-child(3) span:nth-child(2) {
  width: 117px;
  height: 25px;
  color: rgba(165, 173, 183, 100);
  font-size: 18px;
  margin-right: 87px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin-bottom: 16px;
}
.meng .alert div:nth-child(3) span:nth-child(3) {
  /* width: 24px; */
  font-size: 24px 24px;
  display: inline-block;
  /* height: 24px; */
  color: rgba(48, 204, 110, 100);
  margin-bottom: 16px;
}
.meng .alert div:nth-child(3) p {
  padding: 0;
  margin: 0;
  /* margin-left: 27px; */
  width: 387px;
  height: 1px;
  /* background: black; */
  /* border: 1px solid; */
  background: rgba(232, 232, 232, 100);
  border: 1px solid rgba(232, 232, 232, 100);
}
.meng .alert div:nth-child(4) span {
  display: inline-block;
  width: 130px;
  height: 20px;
  margin-top: 16px;
  margin-left: 27px;
  color: rgba(92, 114, 145, 100);
  font-size: 14px;
  /* text-align: left; */
  font-family: PingFangSC-regular;
}
.meng .alert div:nth-child(5) {
  margin-top: 45px;
}
.meng .alert div:nth-child(5) button {
  width: 126px;
  height: 40px;
  border-radius: 4px;
  background-color: rgba(232, 232, 232, 100);
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  /* text-align: center; */
  font-family: Microsoft Yahei;
  border: none;
}
.meng .alert div:nth-child(5) button:nth-child(1) {
  margin-left: 105px;
}
.meng .alert div:nth-child(5) button:nth-child(2) {
  margin-left: 18px;
  background-color: rgba(48, 204, 110, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 16px;
}
/* input */
.phone {
  display: inline-block;
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
}
/* 放大镜 */
.icon-sousuo {
  margin-left: 45px;
}
</style>